<template>
	<view class="whole">
    <view class="certificatebox" v-if="productDetail_product_snap&&pagestate">
      <view class="certificat_img">
          <image
            style="width:70rpx;height:70rpx"
            src="../../static/collect_icon.png"
          ></image>
        </view>
      <view class="certificate_top">
        <view>
          <image
            style="width:430rpx;height:12rpx"
            src="../../static/certificate_top.png"
          ></image>
        </view>
        <view class="certificate_top_text">
          区块链查证信息概览
        </view>
        <view>
          <image
            style="width:430rpx;height:12rpx"
            src="../../static/certificate_top.png"
          ></image>
        </view>
        <view class="certificate_top_tex">
          商品数据
        </view>
      </view>

      <view class="certificate_center" v-if="productDetail_product_snap"> 
        <view class="certificate_center_top" v-for="item,index in 4" :key="index">
          <view class="certificate_center_name">
            <view style="width: 2px;height: 8px;background: #1FE6E6;border-radius: 1px;"></view>
            <view class="certificate_center_text" v-if="index==0">
              藏品名称
            </view>
            <view class="certificate_center_text" v-if="index==1">
              创作者
            </view>
            <view class="certificate_center_text" v-if="index==2">
              发行方
            </view>
            <view class="certificate_center_text" v-if="index==3">
              作品介绍
            </view>
          </view>
          <view class="certificate_Collection_name" v-if="index==0">
            {{productDetail_product_snap.name}}
          </view>
          <view class="certificate_Collection_name" v-if="index==1">
            {{productDetail_product_snap.creator_name}}
          </view>
          <view class="certificate_Collection_name" v-if="index==2">
            {{Issuer}}
          </view>
          <view class="certificate_Collection_name" v-if="index==3">
            {{productDetail_product_snap.synopsis}}
          </view>
          
        </view>

        <view class="authentication">
          <image
            style="width:280rpx;height:280rpx"
            src="../../static/authentication.png"
          ></image>
        </view>
      </view>

       <view class="certificate_detail">
          流转信息
        </view>

        <view class="certificate_bottom"> 
          <view class="certificate_bottom_id">
           ID: {{productDetail.id}}
          </view>
          <view class="certificate_bottom_box" >
            <view class="certificate_bottom_time">
              <view style="width: 2px;height: 8px;background: #1FE6E6;border-radius: 1px;"></view>
              <view class="certificate_bottom_text">
                发放时间
              </view>
            </view>
            <view class="certificate_Collection_name">
               {{productDetail.created_at}}
            </view>
          </view>

          <view class="certificate_bottom_box" >
            <view class="certificate_bottom_time">
              <view style="width: 2px;height: 8px;background: #1FE6E6;border-radius: 1px;"></view>
              <view class="certificate_bottom_text">
                哈希值
              </view>
            </view>
            <view class="certificate_Collection_hx">
               {{productDetail.tx_hash}}
            </view>
          </view>
     
        </view>

        <view style="margin:0 auto">
          <view class="certificate_css">
          </view>
          <view class="certificate_css2">
          </view>

          
          <view class="certificate_css4">
          </view>
          <view class="certificate_css3">
          </view>
         
        </view>

        <view class="certificate_bottom"> 
          <view class="certificate_bottom_id">
           {{productDetail.to_user.nickname}}
          </view>
          <view class="certificate_bottom_box" >
            <view class="certificate_bottom_time">
              <view style="width: 2px;height: 8px;background: #1FE6E6;border-radius: 1px;"></view>
              <view class="certificate_bottom_text">
                发放时间
              </view>
            </view>
            <view class="certificate_Collection_name">
              {{productDetail.created_at}}
            </view>
          </view>

          <view class="certificate_bottom_box" >
            <view class="certificate_bottom_time">
              <view style="width: 2px;height: 8px;background: #1FE6E6;border-radius: 1px;"></view>
              <view class="certificate_bottom_text">
                哈希值
              </view>
            </view>
            <view class="certificate_Collection_hx">
              {{productDetail.tx_hash}}
            </view>
          </view>
        </view>

    </view>
    
		
	</view>
</template>

<script>
import api from '@/api/api.js'
import tip from '@/utils/tip.js'
	export default {
		data() {
			return {
        productDetail_product_snap: null,
        productDetail:null,
        token_id:'',
        user_product_id:'',
        Issuer:'',
        pagestate:false
			}
		},
    onLoad(options) {
        this.token_id = options.token_id || ''
        this.user_product_id = options.user_product_id || ''
        this.getUserProductDetail()
        this.circulationInfo()
    },
		methods: {
      async getUserProductDetail() {
            let res = await api.userProductDetail({
                method: 'get',
                query: {
                    user_product_id: this.user_product_id ,
                    is_cert: 1,
                },
                loading:'加载中'
            })
            if (res.code === 0) {
                    this.Issuer = res.data.product.issuer.nickname
                    this.productDetail_product_snap = JSON.parse(res.data.product_snap)
                }
      },
      async circulationInfo() {
            let res = await api.circulationInfo({
                method: 'get',
                query: {
                    token_id: this.token_id,
                },
            })
            if (res.code === 0) {
                this.productDetail = res.data[0]
                this.pagestate = true
            } else {
                tip.defaults(res.msg)
            }
        },
      
		}
	}
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
*{
  padding: 0;
  margin: 0;
}
.whole {
		background-image: url('/static/certificate_background.png');
		background-repeat: no-repeat;
		/* background-position: center; */
		background-attachment: fixed;
		/* background-size: cover; */
		background-size: 100%;
		
		width: 100%;
		height: 100%;
		min-height: 100vh;
    padding: 1rpx;

    .certificatebox{
      position: relative;
      margin: 50rpx 30rpx;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      // background: #292B2B;
      background: rgba($color: #292B2B, $alpha: 0.49);
      .certificate_css{
        height:0px;
        border: 1px solid #1FE6E6;
        width: 10px;
        transform:rotate(135deg);
        -o-transform:rotate(135deg);
        -moz-transform:rotate(135deg);
        -webkit-transform:rotate(135deg);
      }
      .certificate_css2{
        height: 18px;
        border: 1px solid #1FE6E6;
        width: 2px;
        margin-left: 14rpx;
        margin-top: -10rpx;
      }
      .certificate_css3{
        margin-left: 10rpx;
        height:0px;
        border: 1px solid #1FE6E6;
        width: 10px;
        transform:rotate(-45deg);
      
        margin-left: 23rpx;
        margin-top: -10rpx;
      }
      .certificate_css4{
        height: 18px;
        border: 1px solid #1FE6E6;
        width: 2px;
        margin-left: 25rpx;
        margin-top: -33rpx;
      }
      .certificate_detail{
        text-align: center;
      }
      .certificat_img{
        position: absolute;
        top: -35rpx;
        left: 45%;
      }
      .certificate_top{
        display: flex;
        flex-direction: column;
        align-content: center;
        text-align: center;
        margin-top: 70rpx;
        .certificate_top_text{
          font-size: 24px;
          font-weight: 500;
          color: $text-color3;
          margin: 10rpx 0 0;
        }
        .certificate_top_tex{
          font-size: 18px;
          font-weight: 500;
          color: $text-color3;
          margin-top: 40rpx;
        }
      }
      .certificate_center{
        border: 1px solid #414141;
        margin: 30rpx;
        position: relative;
        border-radius: 6px;
        .authentication{
          float: right;
          position: absolute;
          top: 0;
          right: 0;
        }
        .certificate_center_top{
          margin: 30rpx;
          display: flex;
          flex-direction: column;
          align-content: center;
          margin-bottom: 30rpx;
          .certificate_center_name{
            display: flex;
            align-content: center;
            line-height: 20rpx;
          }
          .certificate_center_text{
            font-size: 12px;
            font-weight: 400;
            color: $text-color1;
            margin-left: 10rpx;
          }
          .certificate_Collection_name{
            font-size: 14px;
            font-weight: 500;
            color: $text-color1;
            margin-top: 10rpx;
          }
        }
        
      }
      .certificate_bottom{
        border: 1px solid #414141;
        margin: 30rpx;
        border-radius: 6px;
        .certificate_bottom_id{
          font-size: 16px;
          font-weight: 500;
          color: $text-color1;
          margin: 30rpx;
        }
        .certificate_bottom_box{
          margin: 30rpx;
          display: flex;
          flex-direction: column;
          align-content: center;
          margin-bottom: 30rpx;
          .certificate_bottom_time{
            display: flex;
            align-content: center;
            line-height: 20rpx;
          }
          .certificate_bottom_text{
            font-size: 12px;
            font-weight: 400;
            color: $text-color1;
            margin-left: 10rpx;
          }
          .certificate_Collection_name{
            font-size: 14px;
            font-weight: 500;
            color: $text-color1;
            margin-top: 10rpx;
          }
          .certificate_Collection_hx{
            margin-top: 10rpx;
            font-size: 12px;
            font-weight: 500;
            color: $text-color1;
            word-break:break-all;
          }
        }
      }
    }
	}

</style>
